<template>
    <div>
       <div class="caidanming"><strong>库存预警 /</strong>仓库储存预警</div>  
      <div class="title">仓库储存预警预警</div>
       <!-- 仓库存储预警
       传递过来的编号{{msgs}} -->
        <!-- 搜索框 -->
    <div class="section1">
      <div class="section1-1">
        <i class="el-icon-search"></i>
        <input type="text" placeholder="输入药品名称" class="input1" />
      </div>
      <div class="section1-2">
        <button class="shezhi">库存预警短信设置</button>
        <button class="hulue">已忽略报警</button>
        <button class="caigou">采购入库</button>
        <button class="daochu">导出</button>
      </div>
    </div>
    <div class="nei1">
     
      <!-- 药品分类 -->
      <div class="xuanze">
        <el-select v-model="value2" placeholder="药品分类">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <span class="kucun">库存</span>
      <input type="text" class="inp" />&nbsp;-
      <input type="text" class="inp" />
      <button class="btn-qr">确认</button>
    </div>
    <!-- 表格 -->
    <div class="section2">
      <el-table
        ref="multipleTable"
        :data="newList"
        tooltip-effect="dark"
        style=" font-size:13px"
        @selection-change="handleSelectionChange"
        :row-style="{height:'60px'}"
        :header-cell-style="{color:'',borderBottom:'2px solid #39b9ae'}"
      >
        <!-- 勾选框 -->
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="address" label="序号" width="130"></el-table-column>
        <el-table-column prop="name" label="药品名称" width="225"></el-table-column>
        <el-table-column prop="name" label="药品分类" width="225"></el-table-column>
        <el-table-column prop="name" label="生产厂家" width="225"></el-table-column>
        <el-table-column prop="name" label="库存数量" width="225"></el-table-column>
        <!-- 操作下拉框 -->
        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-dropdown>
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="modify(scope.row,0)">忽略</el-dropdown-item>
                  <el-dropdown-item @click.native="modify(scope.row,1)">预警</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
</template>
<script>
export default {
     data(){
        return{
            msgs:2,
   pageNum: 6,
      nowPage: 0,
      drugList: [],
      newList: [],
      value2: [],
     
      //   药品分类
      options2: [
        {
          value: '选项1',
          label: '阿莫西林2',
        },
        {
          value: '选项2',
          label: '苯海拉明注射液2',
        },
        {
          value: '选项3',
          label: '氯雷他定片2',
        },
        {
          value: '选项4',
          label: '999感冒颗粒2',
        },
        {
          value: '选项5',
          label: '鼻炎片2',
        },
      ],
      value2: '',
        }
    },
    methods:{
      handleSelectionChange(val){
        console.log(val);
      }
    }
}
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
}
.buju {
  width: 100%;
}

.el-radio-group.el-radio-button {
  text-align: center;
}
.section1 {
  width: 100%;
}
/* 搜索框 */
.section1-1 {
  border-bottom: 1px solid gainsboro;
  width: 250px;
  display: inline-block;
  position: relative;
  /* top: 40px; */
  top: 50px;
  left: 15px;
  /* display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  flex-direction: row; */
}
.input1 {
  width: 200px;
  height: 40px;
  border: none;
  margin-left: 10px;
  font-size: 17px;
}
input:focus {
  border: none;
  outline: none;
}
/* 设置和导出的布局 */
.section1-2 {
  display: inline-block;
  width: 30%;
  height: 80px;
  /* border: 1px solid green; */
   /* 添加头部菜单名之前的 children2的定位 */
  /* position: absolute;
  top: 135px;
  right: 0px; */
   position: absolute;
  top: 255px;
  right: 0px;
}
.shezhi {
  position: relative;
  top: 0px;
  right: -220px;
  width: 170px;
  height: 30px;
  border-radius: 5%;
  border: 2px solid #d0d1d1;
  color: black;
  margin-left: 20px;
  background-color: #dad6d6;
  outline: none;
}
.hulue{
      position: relative;
  top: 50px;
  right: 85px;
  width: 100px;
  height: 30px;
  border-radius: 5%;
  border: 2px solid #d0d1d1;
  color: black;
  margin-left: 20px;
  background-color: #dad6d6;
  outline: none;
}
.caigou{
      position: relative;
  top: 50px;
  right: 100px;
  width: 80px;
  height: 30px;
  border-radius: 5%;
  border: 2px solid #39b9ae;
  color: white;
  margin-left: 20px;
  background-color: #39b9ae;
  outline: none;
}
.daochu {
  position: relative;
  top: 20px;
  right: -310px;
  width: 80px;
  height: 30px;
  border-radius: 5%;
  border: 2px solid #39b9ae;
  color: white;
  margin-left: 20px;
  background-color: #39b9ae;
  outline: none;
}
/* 整条项目栏的布局 */
.nei1 {
  /* border: 1px solid yellow; */
  margin: 10px 0px 0px 0px;
  position: relative;
  top: 60px;
  left: 0px;
}
.xuanze {
  display: inline-block;
}
.xuanze >>> .el-input__inner {
  width: 150px;
  margin: 0px 10px;
}
.time-wen {
  font-size: 16px;
}
.btn {
  width: 85px;
  height: 40px;
  border: 2px solid #39b9ae;
  color: #39b9ae;
  /* font-size: 15px; */
  margin-left: 20px;
  background-color: #ffffff;
  outline: none;
  position: relative;
  top: 1px;
  right: 25px;
}
.kucun {
  font-size: 16px;
}
.inp {
  width: 35px;
  height: 25px;
  border: 1px solid rgb(182, 178, 178);
  border-radius: 5%;
}
.btn-qr {
  width: 85px;
  height: 40px;
  border: 2px solid #39b9ae;
  color: #39b9ae;
  /* font-size: 15px; */
  margin-left: 20px;
  background-color: #ffffff;
  outline: none;
}
/* 表格 */
.section2 {
  /* border:1px solid blue; */
  position: relative;
  top: 75px;
  left: 0px;
}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}
</style>